<!DOCTYPE html>
<html lang="zh-CN">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--IE兼容模式-->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--让部分浏览器使用高速模式-->
    <meta name="renderer" content="webkit">
    <title>BSStudy</title>
    <!--引入bootsrtap-->
    <!--<link rel="stylesheet" href="../css/frame/normalize.css">-->
    <link rel="stylesheet" href="../css/frame/bootstrap.css">
    <style>
      body {
        padding-top: 70px;
      }
    </style>
  </head>

  <body data-spy="scroll" data-target="#navbar-example">
    <div class="container">
      <!--<h1>Hello，world </h1>
      <div class="row">
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
      </div>
      <div class="row">
        <div class="col-md-8">col-md-8</div>
        <div class="col-md-4">col-md-4</div>
      </div>
      <div class="row">
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-4">col-md-4</div>
      </div>
      <div class="row">
        <div class="col-md-6">col-md-6</div>
        <div class="col-md-6">col-md-6</div>
      </div>
      <!---------------------------------针对移动设备和中等以下屏幕单独设定-->

      <!--<div class="row">
        <div class="col-xs-12 col-md-8">col-xs-12,col-md-8</div>
        <div class="col-xs-6 col-md-4">col-xs-6,col-md-4</div>
      </div>
      <!--< !——列宽50%开始移动,宽提高到33.3%的桌面- - >-->
      <!--<div class="row">
        <div class="col-xs-6 col-md-4">col-xs-6,col-md-4</div>
        <div class="col-xs-6 col-md-4">col-xs-6,col-md-4</div>
        <div class="col-xs-6 col-md-4">col-xs-6,col-md-4</div>
      </div>
      <!--列宽总是50%-->
      <!--<div class="row">-->
      <!--<div class="col-xs-6">col-xs-6</div>
      <div class="col-xs-6">col-xs-6</div>-->
      <!--</div>-->
      <!---------------------------------针对平板设备的.col-sm-*类-->
      <!--<div class="row">
        <div class="col-xs-12 col-sm-6 col-md-8">col-xs-12 col-sm-6 col-md-8</div>
        <div class="col-xs-5 col-md-4">col-xs-5 col-md-4</div>
      </div>
      <div class="row">
        <div class="col-xs-6 col-sm-4">col-xs-6 col-sm-4</div>
        <div class="col-xs-6 col-sm-4">col-xs-6 col-sm-4</div>
      </div>

      <div class="row">
        <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
        <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>-->

      <!-- Add the extra clearfix for only the required viewport -->
      <!--<div class="clearfix visible-xs-block"></div>

        <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
        <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>-->
      <!--</div>-->
      <h1>栅格布局</h1>
      <div class="row">
        <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
        <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
      </div>

      <div class="row">
        <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
        <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
      </div>

      <!--列排序-->
      <div class="row">
        <div class="col-md-9 col-md-push-3">col-md-9 .col-md-push-3</div>
        <div class="col-md-3 col-md-pull-9">col-md-3 .col-md-push-9</div>
      </div>

      <p>Justified text.Justified text.Justified text.Justified text.Justified text.Justified text.Justified text.Justified
        text.Justified text.Justified text.Justified text.Justified text.Justified text.Justified text.Justified text.Justified
        text.
      </p>

      <!--表单输入框块-->
      <div class="form-froup has-success">
        <label for="inputSuccess1" class="control-label">Input with success</label>
        <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
        <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
        <!--<span id="inputSuccess2Status" class="sr-only">(success)</span>-->
      </div>
      <div class="form-group has-warning">
        <label for="inputWarning" class="control-label">Input with warning</label>
        <input type="text" class="form-control" id="inputWarning1">
      </div>
      <div class="form-group has-error">
        <label for="inputError1" class="control-label">Input with error</label>
        <input type="text" class="form-control" id="inputError1">
      </div>
      <div class="has-success">
        <div class="checkbox">
          <label>
          <input type="checkbox" id="checkboxSuccess" value="option1">
          Checkbox with success
           </label>
        </div>
      </div>
      <div class="has-warning">
        <div class="checkbox">
          <label>
          <input type="checkbox" id="checkboxWarning" value="option1">
          Checkbox with warning
           </label>
        </div>
      </div>
      <div class="has-error">
        <div class="checkbox">
          <label>
          <input type="checkbox" id="checkboxError" value="option1">
          Checkbox with error
           </label>
        </div>
      </div>

      <!--在输入框中添加额外的图标-->
      <div class="form-group has-success has-feedback">
        <label for="inputSuccess2" class="control-label">成功信息</label>
        <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
        <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden=""></span>
        <span class="sr-only" id="inputSuccess2Status">(success)</span>
      </div>
      <div class="form-group has-warning has-feedback">
        <label for="inputWarning2" class="control-label">警告信息</label>
        <input type="text" class="form-control" id="inputWarning" aria-describedby="inputWarning2Status">
        <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
      </div>


      <!--水平排列的表单组的尺寸-->
      <form action="" class="form-horizontal">
        <div class="form-group form-group-lg">
          <label for="formGroupInputLarge" class="col-sm-2 control-label">
            Large label
          </label>
          <div class="col-sm-10">
            <input type="text" class="form-control" id="formGroupInputLarge" placeholder="Largeinput">
          </div>
        </div>
        <div class="form-group form-group-sm">
          <label for="formGroupInputSmall" class="col-sm-2 control-label">Small Label</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" id="formGroupInputSmall" placeholder="Smallinput">
          </div>
        </div>
      </form>


      <!--利用col-xs来调整列的尺寸，1-12-->
      <div class="row">
        <div class="col-xs-2">
          <input type="text" class="form-control" placeholder=".col-xs-2">
        </div>
        <div class="col-xs-3">
          <input type="text" class="form-control" placeholder=".col-xs-3">
        </div>
        <div class="col-xs-4">
          <input type="text" class="form-control" placeholder=".col-xs-4">
        </div>
        <div class="col-xs-12">
          <input type="text" class="form-control" placeholder=".col-xs-12">
        </div>
      </div>

      <!--按钮元素-->
      <div class="row">
        <a href="#" class="btn btn-default" role="button">link</a>
        <button class="btn btn-default" type="submit">Button</button>
        <input type="button" class="btn btn-default" value="Input">
        <input type="submit" class="btn btn-default" value="submit">
      </div>

      <!--关于预定义样式-->
      <button class="btn btn-default">(默认样式)Default</button>
      <button class="btn btn-primary">(首选项)Primary</button>
      <button class="btn btn-success">(成功)success</button>
      <button class="btn btn-info">(一般信息)info</button>
      <button class="btn btn-warning">(警告)warning</button>
      <button class="btn btn-danger">(危险)Danger</button>
      <button class="btn btn-link">(链接)link</button>

      <!--尺寸-->
      <p>
        <button class="btn btn-primary btn-lg">(大按钮)Large Button</button>
        <button class="btn btn-default btn-lg">(大按钮)Large Button</button>
      </p>
      <p>
        <button class="btn btn-primary">(默认尺寸)default Button</button>
        <button class="btn btn-default">(默认尺寸)default Button</button>
      </p>
      <p>
        <button class="btn btn-primary btn-sm">(小按钮)Small Button</button>
        <button class="btn btn-default btn-sm">(小按钮)Small Button</button>
      </p>
      <p>
        <button class="btn btn-primary btn-xs">(超小按钮)Extra small Button</button>
        <button class="btn btn-default btn-xs">(超小按钮)Extra small Button</button>
      </p>

      <button class="btn btn-primary btn-lg btn-block">(块级元素)Block level button</button>
      <button class="btn btn-default btn-lg btn-block">(块级元素)Block level button</button>


      <!--激活状态-->
      <!--按钮激活状态-->
      <button class="btn btn-primary btn-lg active">Primary button</button>
      <button class="btn btn-default btn-lg active">button</button>
      <!--a标签激活状态-->
      <a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
      <a href="#" class="btn btn-default btn-lg active" role="button">Default link</a>


      <!--禁用状态-->
      <button class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
      <button class="btn btn-lg btn-default" disabled="disabled">button</button>

      <!--利用readonly设置只读状态      -->
      <input type="text" class="form-control" placeholder="Readonly input here" readonly>

      <!--校验状态-->
      <h1>校验状态</h1>
      <div class="form-group has-succerss">
        <label class="control-label" for="inputSuccess1">Input width success</label>
        <input type="text" class="form-cintrol" id="inputSuccess3" aria-describedby="helpBlock3">
        <span id="helpBlock3" class="help-block">of help text that breaks onto a new line and may extend beyond one line</span>
      </div>

      <div class="form-group has-warning">
        <label for="inputWarning1" class="control-label"></label>
        <input type="text" class="form-control" id="inputError2">
      </div>
      <!--<input type="text" class="form-control input-lg">-->

      <!--控件尺寸,通过.input-lg类似的类可以为控件设置高度,.col-lg类似的类可以为控件设置宽度-->
      <h1>控件尺寸</h1>
      <input type="text" class="form-control input-lg" placeholder=".input-lg">
      <input type="text" class="form-control" placeholder=".default-input">
      <input type="text" class="form-control input-sm" placeholder=".input-sm">
      <select type="text" class="form-control input-lg" placeholder=".input-lg"></select>
      <select type="text" class="form-control" placeholder=".default-input"></select>
      <select type="text" class="form-control input-sm" placeholder=".input-sm"></select>

      <!--辅助类-->
      <h1>辅助类--文字颜色</h1>
      <p><a href="#" class="text-muted">程序设计之道</a></p>
      <p><a href="#" class="text-primary">停格</a></p>
      <p><a href="#" class="text-success">海龟先生</a></p>
      <p><a href="#" class="text-info">拉里·佩奇</a></p>
      <p><a href="#" class="text-warning">多隆校长</a></p>
      <p><a href="#" class="text-danger">阿里云</a></p>

      <h1>辅助类--元素背景色</h1>
      <p class="bg-primary">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
      <p class="bg-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
      <p class="bg-info">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
      <p class="bg-warning">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
      <p class="bg-danger">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>



      <!--组件-->
      <h1>组件</h1>
      <button type="button" class="btn btn-default" aria-label="Left Align">
        <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
      </button>
      <button class="btn btn-default btn-lg">
        <span class="glyphicon glphicon-star" aria-hidden="true">Star</span>
      </button>


      <!--下拉菜单-->
      <h1>菜单</h1>
      <h1>下拉菜单</h1>
      <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" id="dropdownMenu1" type="button" data-toggle="dropdown" aria-haspopup="true"
          aria-expanded="true">
          Dropdown
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div>
      <h2>上弹菜单</h2>
      <div class="dropup">
        <button class="btn btn-default dropdown-toggle" id="dropdownMenu2" type="button" data-toggle="dropdown" aria-haspopup="true"
          aria-expanded="true">
          Dropdown
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>

        <h1>下拉菜单中的分割线</h1>
        <div class="dropdown">
          <button class="btn btn-default dropdown-toggle" id="dropdownMenu3" type="button" data-toggle="dropdown" aria-haspopup="true"
            aria-expanded="true">
          Dropdown
          <span class="caret"></span>
        </button>
          <ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </div>

        <h1>下拉菜单中的小标题</h1>
        <div class="dropdown">
          <button class="btn btn-default dropdown-toggle" id="dropdownMenu4" type="button" data-toggle="dropdown" aria-haspopup="true"
            aria-expanded="true">
          Dropdown
          <span class="caret"></span>
        </button>
          <ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="dropdown-header">Dropdown header</li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </div>


        <!--按钮组-->
        <h1>基本按钮组实例</h1>
        <div class="btn-group" role="group" aria-label="">
          <button type="button" class="btn btn-default">Left</button>
          <button type="button" class="btn btn-default">Middle</button>
          <button type="button" class="btn btn-default">Right</button>
        </div>

        <h1>按钮工具栏</h1>
        <div class="btn-toolbar" role="toolbar" aria-label="">
          <div class="btn-group" role="group" aria-label="">
            <button type="button" class="btn btn-default">Left</button>
            <button type="button" class="btn btn-default">Middle</button>
            <button type="button" class="btn btn-default">Right</button>
          </div>
          <div class="btn-group" role="group" aria-label="">
            <button type="button" class="btn btn-default">Left</button>
            <button type="button" class="btn btn-default">Middle</button>
            <button type="button" class="btn btn-default">Right</button>
          </div>
          <div class="btn-group" role="group" aria-label="">
            <button type="button" class="btn btn-default">Left</button>
            <button type="button" class="btn btn-default">Middle</button>
            <button type="button" class="btn btn-default">Right</button>
          </div>
        </div>

        <h1>尺寸</h1>
        <div class="btn-group btn-group-lg" role="group" aria-label="">
          <button class="btn-group" role="group" aria-label="">1</button>
          <button class="btn-group" role="group" aria-label="">2</button>
          <button class="btn-group" role="group" aria-label="">3</button>
        </div>
        <div class="btn-group " role="group" aria-label="">
          <button class="btn-group" role="group" aria-label="">1</button>
          <button class="btn-group" role="group" aria-label="">2</button>
          <button class="btn-group" role="group" aria-label="">3</button>
        </div>
        <div class="btn-group btn-group-sm" role="group" aria-label="">
          <button class="btn-group" role="group" aria-label="">1</button>
          <button class="btn-group" role="group" aria-label="">2</button>
          <button class="btn-group" role="group" aria-label="">3</button>
        </div>
        <div class="btn-group btn-group-xs" role="group" aria-label="">
          <button class="btn-group" role="group" aria-label="">1</button>
          <button class="btn-group" role="group" aria-label="">2</button>
          <button class="btn-group" role="group" aria-label="">3</button>
        </div>


        <!--嵌套-->
        <h1>嵌套</h1>
        <div class="btn-group" role="group" aria-label="">
          <button type="button" class="btn btn-default">1</button>
          <button type="button" class="btn btn-default">2</button>
          <div class="btn-group" role="group">
            <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">                
                Dropdown
                <span class="caret"></span>
              </button>
            <ul class="dropdown-menu">
              <li><a href="#">Dropdown link</a></li>
              <li><a href="#">Dropdown link</a></li>
            </ul>
          </div>
        </div>

        <!--垂直排列-->
        <h1>垂直排列</h1>
        <div class="btn-group-vertical" role="group">
          <button class="btn btn-default">1</button>
          <button class="btn btn-default">2</button>
          <button class="btn btn-default">3</button>
          <div class="btn-group" role="group">
            <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">                
                Dropdown
                <span class="caret"></span>
              </button>
            <ul class="dropdown-menu">
              <li><a href="#">Dropdown link</a></li>
              <li><a href="#">Dropdown link</a></li>
            </ul>
          </div>
          <button class="btn btn-default">4</button>
          <div class="btn-group" role="group">
            <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">                
                Dropdown
                <span class="caret"></span>
              </button>
            <ul class="dropdown-menu">
              <li><a href="#">Dropdown link</a></li>
              <li><a href="#">Dropdown link</a></li>
            </ul>
          </div>
          <button class="btn btn-default">5</button>
        </div>


        <!--两端对齐排列的按钮组-->
        <h1>两端对齐排列的按钮组</h1>
        <div class="btn-group btn-group-justified" role="group">
          <div class="btn-group">
            <button type="button" class="btn btn-default">1</button>
          </div>
          <div class="btn-group">
            <button type="button" class="btn btn-default">2</button>
          </div>
          <div class="btn-group">
            <button type="button" class="btn btn-default">3</button>
          </div>
          <div class="btn-group">
            <button type="button" class="btn btn-default">4</button>
          </div>
        </div>

        <!--按钮式下拉菜单-->
        <h1>单按钮式下拉菜单</h1>
        <div class="btn-group">
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Action
              <span class="caret"></span>
          </button>
          <ul class="dropdown-menu">
            <li><a href="">Action</a></li>
            <li><a href="">Another action</a></li>
            <li><a href="">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="">Separated link</a></li>
          </ul>
        </div>

        <h1>分裂式按钮下拉菜单</h1>
        <div class="btn-group">
          <button class="btn btn-danger">Action</button>
          <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <span class="caret"></span>
              <span class="sr-only">Toggle Dropdown</span>
          </button>
          <ul class="dropdown-menu">
            <li><a href="">Action</a></li>
            <li><a href="">Another action</a></li>
            <li><a href="">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="">Separated link</a></li>
          </ul>
        </div>



        <!--输入框组-->
        <h1>输入框组</h1>
        <div class="input-group">
          <span class="input-group-addon" id="basic-addon1">@</span>
          <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
        </div>
        <div class="input-group input-group-lg">
          <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
          <span class="input-group-addon" id="basic-addon2">@example.com</span>
        </div>
        <div class="input-group">
          <span class="input-group-addon" id="basic-addon3">$</span>
          <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
          <span class="input-group-addon" id="basic-addon4">.00</span>
        </div>
        <label for="">Your URL</label>
        <div class="input-group">
          <span class="input-group-addon" id="basic-addon5">https://example.com/users/</span>
          <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
        </div>



        <!--单选框与多选框-->
        <h1>单选框与多选框</h1>
        <div class="row">
          <!--单选框-->
          <div class="col-lg-6">
            <div class="input-group">
              <span class="input-group-addon">
                <input type="checkbox" aria-label="">
              </span>
              <input type="text" class="form-control" aria-label="">
            </div>
          </div>
          <!--复选框-->
          <div class="col-lg-6">
            <div class="input-group">
              <span class="input-group-addon">
                <input type="radio" aria-label="">
              </span>
              <input type="text" class="form-control" aria-label="">
            </div>
          </div>
        </div>


        <!--作为额外元素的按钮-->
        <h1>作为额外元素的按钮</h1>
        <div class="row">
          <div class="col-lg-6">
            <div class="input-group">
              <span class="input-group-btn">
                <button class="btn btn-default">GO!</button>
              </span>
              <input type="text" class="form-control" placeholder="Search for ...">
            </div>
          </div>
          <div class="col-lg-6">
            <div class="input-group">
              <input type="text" class="form-control" placeholder="Search for ...">
              <span class="input-group-btn">
                <button class="btn btn-default">GO!</button>
              </span>
            </div>
          </div>
        </div>


        <!--作为额外元素的按钮式下拉菜单-->
        <h1>作为额外元素的按钮式下拉菜单</h1>
        <div class="row">
          <div class="col-lg-6">
            <div class="input-group">
              <div class="input-group-btn">
                <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Action
                        <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                  <li><a href="">Action</a></li>
                  <li><a href="">Another action</a></li>
                  <li><a href="">Something link</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="">Separated link</a></li>
                </ul>
              </div>
              <input type="text" class="form-control" aria-label="">
            </div>
          </div>
          <div class="col-lg-6">
            <div class="input-group">
              <input type="text" class="form-control" aria-label="">
              <div class="input-group-btn">
                <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Action
                        <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                  <li><a href="">Action</a></li>
                  <li><a href="">Another action</a></li>
                  <li><a href="">Something link</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="">Separated link</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>

        <h1>导航标签页</h1>
        <ul class="nav nav-tabs">
          <li role="presentation" class="active"><a href="">Home</a></li>
          <li role="presentation"><a href="">Profile</a></li>
          <li role="presentation"><a href="">Messages</a></li>
        </ul>

        <h1>胶囊式标签页</h1>
        <ul class="nav nav-pills">
          <li role="presentation" class="active"><a href="">Home</a></li>
          <li role="presentation"><a href="">Profile</a></li>
          <li role="presentation"><a href="">Messages</a></li>
        </ul>

        <h1>垂直方向的胶囊式标签页</h1>
        <ul class="nav nav-pills  nav-stacked">
          <li role="presentation" class="active"><a href="">Home</a></li>
          <li role="presentation"><a href="">Profile</a></li>
          <li role="presentation"><a href="">Messages</a></li>
        </ul>
      </div>



      <!--响应式导航条-->
      <h1>响应式导航条</h1>
      <!--声明一个导航块组件-->
      <nav class="navbar navbar-default">
        <!--声明一个流动容器-->
        <div class="container-fluid">
          <!--显示头-->
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
              aria-expanded="false">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
          </div>
          <!--收集导航链接、表单和其他内容切换-->
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
              <li class="active"><a>Link<span class="sr-only">(current)</span></a></li>
              <li><a>link</a></li>
              <li class="dropdown">
                <a href="" class="dropdown-toggle" data-toggle="dropdown" role="button">Dropdown<span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li><a href="">Action</a></li>
                  <li><a href="">Another action</a></li>
                  <li><a href="">Something else here</a></li>
                  <li role="separator" class="divider"></li>
                  <li>
                    <a href="">Separated link</a>
                  </li>
                  <li role="separator" class="divider"></li>
                  <li>
                    <a href="">One more separated link</a>
                  </li>
                </ul>
              </li>
            </ul>
            <form action="" class="navbar-form navbar-left">
              <div class="form-group">
                <input type="text" class="form-control" placeholder="Search">
              </div>
              <button type="submit" class="btn btn-default">Submit</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
              <li><a href="#">Link</a></li>
              <li class="dropdown">
                <a href="" class="dropdown-toggle" data-toggle="dropdown" role="button">Dropdown<span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li><a href="">Action</a></li>
                  <li><a href="">Another action</a></li>
                  <li><a href="">Something else here</a></li>
                  <li role="separator" class="divider"></li>
                  <li>
                    <a href="">Separated link</a>
                  </li>
                </ul>
              </li>
            </ul>
            <!--表单-->
            <form class="navbar-form navbar-left" role="search">
              <div class="form-group">
                <input type="text" class="form-control" placeholder="Search">
              </div>
              <button class="btn btn-default">Submit</button>
            </form>
            <!--按钮-->
            <button type="button" class="btn btn-default navbar-btn">Signin</button>
            <!--文本-->
            <p class="navbar-text">把文本包裹在 <code>.navbar-text</code>中时，为了有正确的行距和颜色，通常使用<code>&#60p&#62</code> 标签。</p>
            <!--添加非标准的链接-->
            <p class="navbar-text navbar-right">Signin in as <a href="" class="navbar-link">Mark Otto</a></p>
          </div>
        </div>
      </nav>

      <!--添加navbar-fixed-top设置顶部导航栏-->
      <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
          <!--显示头-->
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2"
              aria-expanded="false">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
          </div>

          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
            <ul class="nav navbar-nav">
              <li><a href="">Home</a></li>
              <li><a href="">Link</a></li>
              <li><a href="">sdarq</a></li>
            </ul>
          </div>
        </div>
      </nav>

      <!--设置导航条外观-->
      <h1>反色的导航条</h1>
      <nav class="navbar navbar-inverse">
        <div class="container">
          <!--显示头-->
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-3"
              aria-expanded="false">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
          </div>

          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-3">
            <ul class="nav navbar-nav">
              <li><a href="">Home</a></li>
              <li><a href="">Link</a></li>
              <li><a href="">sdarq</a></li>
            </ul>
          </div>
        </div>
      </nav>


      <!--路径导航-->
      <h1>路径导航</h1>
      <ol class="breadcrumb">
        <li><a href="">Home</a></li>
        <li><a href="">Library</a></li>
        <li class="active">Data</li>
      </ol>


      <!--默认分页组件-->
      <h1>默认分页组件,变大或缩小使用pagination-lg,pagination-sm</h1>
      <nav aria-label="Page navigation">
        <ul class="pagination pagination-lg">
          <li><a href=""><span>&laquo;</span></a></li>
          <li class="active"><a href="">1</a></li>
          <li><a href="">2</a></li>
          <li><a href="">3</a></li>
          <li class="disabled"><a href="">4</a></li>
          <li><a href="">5</a></li>
          <li><a href=""><span>&raquo;</span></a></li>
        </ul>
      </nav>

      <!--链接对去-->
      <h1>链接对齐</h1>
      <nav>
        <ul class="pager">
          <li class="previous"><a>Oldera<span>&larr;</span></a></li>
          <li class="next"><a>Newer<span>&rarr;</span></a></li>
        </ul>
      </nav>

      <!--警告框-->
      <h1>警告框,</h1>
      <div class="alert alert-success">
        <p>Well done! You successfully read this important alert message.</p>
      </div>
      <div class="alert alert-info">
        <p>Heads up! This alert needs your attention, but it's not super important.</p>
      </div>
      <div class="alert alert-warning">
        <p>Warning! Better check yourself, you're not looking too good.</p>
      </div>
      <div class="alert alert-danger">
        <p>Oh snap! Change a few things up and try submitting again.</p>
      </div>


      <h1>可关闭的警告框</h1>
      <div class="alert alert-warning alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
          <span aria-hidden="true">&times;</span>
          </button>
        <strong>Warning!</strong> Better check yourself, you're not looking too good.
      </div>



      <h1>警告框中的链接</h1>
      <div class="alert alert-success" role="alert">
        <span>请点击</span><a href="" class="alert-link">这是一条链接</a>
      </div>
      <div class="alert alert-info" role="alert">
        <span>请点击</span><a href="" class="alert-link">
          这是一条链接
        </a>
      </div>
      <div class="alert alert-warning" role="alert">
        <span>请点击</span><a href="" class="alert-link">
          这是一条链接
        </a>
      </div>
      <div class="alert alert-danger" role="alert">
        <span>请点击</span><a href="" class="alert-link">
          这是一条链接
        </a>
      </div>



      <h1>进度条</h1>
      <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="min-width:2em; width:60%">
          <span>60% Complete</span>
        </div>
      </div>



      <h1>四种情境变化效果</h1>
      <code>.progress-bar-success</code>
      <div class="progress">

        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
          style="min-width:2em; width:60%">
          <span>60% Complete</span>
        </div>
      </div>
      <code>.progress-bar-info</code>
      <div class="progress">

        <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="min-width:2em; width:60%">
          <span>60% Complete</span>
        </div>
      </div>
      <code>.progress-bar-warning</code>
      <div class="progress">

        <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
          style="min-width:2em; width:60%">
          <span>60% Complete</span>
        </div>
      </div>
      <code>.progress-bar-danger</code>
      <div class="progress">

        <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
          style="min-width:2em; width:60%">
          <span>60% Complete</span>
        </div>
      </div>

      <h1>条纹系统</h1>
      <code>.progress-bar-success</code> <code>.progress-bar-striped</code>
      <div class="progress">
        <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0"
          aria-valuemax="100" style="min-width:2em; width:60%">
          <span>60% Complete</span>
        </div>
      </div>
      <code>.progress-bar-info</code> <code>.progress-bar-striped</code>
      <div class="progress">
        <div class="progress-bar progress-bar-info  progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0"
          aria-valuemax="100" style="min-width:2em; width:60%">
          <span>60% Complete</span>
        </div>
      </div>
      <code>.progress-bar-warning</code> <code>.progress-bar-striped</code>
      <div class="progress">
        <div class="progress-bar progress-bar-warning  progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0"
          aria-valuemax="100" style="min-width:2em; width:60%">
          <span>60% Complete</span>
        </div>
      </div>
      <code>.progress-bar-danger</code> <code>.progress-bar-striped</code>
      <div class="progress">
        <div class="progress-bar progress-bar-danger  progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0"
          aria-valuemax="100" style="min-width:2em; width:60%">
          <span>60% Complete</span>
        </div>
      </div>


      <h1>动画效果</h1>
      <div class="progress">
        <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"
          style="width:45%">
          <span class="sr-only">45% Complete</span>
        </div>
      </div>


      <h1>堆叠效果</h1>
      <div class="progress">
        <div class="progress-bar progress-bar-success" style="width: 35%">
          <span class="sr-only">35% Complete (success)</span>
        </div>
        <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
          <span class="sr-only">20% Complete (warning)</span>
        </div>
        <div class="progress-bar progress-bar-danger" style="width: 10%">
          <span class="sr-only">10% Complete (danger)</span>
        </div>
      </div>

      <h1>媒体对象</h1>
      <div class="media">

        <div class="media-body">
          <h4 class="media-heading">Media Obj</h4>
          <p>Hello world</p>
        </div>
        <div class="media-right media-middle">
          <a href="">
            <p class="media-object">dadafsafaf</p>
          </a>
        </div>
      </div>


      <h1>列表组-徽章组件</h1>
      <h4>禁用单个条目添加<code>.disabled</code></h4>
      <ul class="list-group">
        <li class="list-group-item"><span class="badge">14</span>dasdas</li>
        <li class="list-group-item"><span class="badge">2</span>4321</li>
        <li class="list-group-item"><span class="badge">54</span>ffsaf</li>
        <li class="list-group-item"><span class="badge">848</span>各地人情味</li>
        <li class="list-group-item"><span class="badge">8787</span>fdagrtjhe</li>
      </ul>


      <h1>列表链接</h1>
      <h4>禁用单个条目添加<code>.disabled</code></h4>
      <div class="list-group">
        <a class="list-group-item"><span class="badge">14</span>dasdas</a>
        <a class="list-group-item"><span class="badge">2</span>4321</a>
        <a class="list-group-item"><span class="badge">54</span>ffsaf</a>
        <a class="list-group-item"><span class="badge">848</span>各地人情味</a>
        <a class="list-group-item"><span class="badge">8787</span>fdagrtjhe</a>
      </div>

      <h1>列表按钮</h1>
      <h4>禁用单个条目添加<code>.disabled</code></h4>
      <div class="list-group">
        <button class="list-group-item disabled">Cras justo </button>
        <button class="list-group-item">Dapibus ac facilisis in</button>
        <button class="list-group-item">Morbi leo risus</button>
        <button class="list-group-item">Porta ac consectetur ac</button>
        <button class="list-group-item">Vestibulum at eros</button>
      </div>

      <h1>情境类</h1>
      <h4>为列表中的条目添加情境类，默认样式或链接列表都可以。还可以为列表中的条目设置 <code>.active</code> 状态。</h4>
      <ul class="list-group">
        <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
        <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
        <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
        <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
      </ul>
      <div class="list-group">
        <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
        <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
        <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
        <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
      </div>

      <h1>定制内容</h1>
      <div class="list-group">
        <a href="#" class="list-group-item">
          <h4 class="list-group-item-heading">List group item heading</h4>
          <p class="list-group-item-text">...</p>
        </a>
      </div>

      <h1>带表格的面板</h1>
      <div class="panel panel-default">
        <!--默认的面板内容-->
        <div class="panel-heading">Panel heading</div>
        <div class="panel-body">
          <p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur.
            Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies
            vehicula ut id elit.</p>
        </div>
        <!--表格-->
        <table class="table">
          <tr>
            <td>#</td>
            <td>Firstname</td>
            <td>Lastname</td>
            <td>Username</td>
          </tr>
          <tr>
            <th>1</th>
            <th>Mark</th>
            <th>Otto</th>
            <th>@mdo</th>
          </tr>
          <tr>
            <th>2</th>
            <th>Jacob</th>
            <th>Thornton</th>
            <th>@fat</th>
          </tr>
          <tr>
            <th>3</th>
            <th>Larry</th>
            <th>the Bird</th>
            <th>@twitter</th>
          </tr>
        </table>
      </div>

      <h1>具有响应式特性的嵌入内容</h1>
      <div class="embed-responsive embed-responsive-16by9">
        <iframe src="//www.youtube.com/embed/zpOULjyy-n8?rel=0" class="embed-responsive-item"></iframe>
      </div>

      <div class="embed-responsive embed-responsive-4by3">
        <iframe src="//www.youtube.com/embed/zpOULjyy-n8?rel=0" class="embed-responsive-item"></iframe>
      </div>

      <h1>嵌入效果</h1>
      <h4>大用<code>.well-lg</code></h4>
      <h4>小用<code>.well-sm</code></h4>
      <div class="well">
        <p>Look, I'm in a well!</p>
      </div>

    </div>

    <!--------------------------------------模态框区域块---------------------------------->
    <h1>弹出模态框</h1>
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal1">Launch demo modal</button>

    <div id="myModal1" class="modal fade" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button class="close" data-dismiss="modal"><span>&times;</span></button>
            <h4 class="modal-title">Modal title</h4>
          </div>
          <div class="modal-body">
            <p>One fine body&hellip;</p>
          </div>
          <div class="modal-footer">
            <button class="btn btn-default" data-dismiss="modal">Close</button>
            <button class="btn btn-default">Save changes</button>
          </div>
        </div>
      </div>
    </div>


    <h1>滚动监听</h1>
    <div id="navbar-example">
      <ul class="nav nav-tabs" role="tablist">

      </ul>
    </div>

    <h1>弹出框</h1>
    <button type="button" class="btn btn-lg btn-danger" 
      data-toggle="popover" 
      title="我是头" 
      data-content="我是内容"
      data-container="body"   
      data-trigger="focus"
      data-placement="top">
      点我弹出?
    </button>

    <h1>警告框</h1>
    <button class="close" data-dismiss="alert" aria-label="Close"> 
      <span aria-hidden="true">&times;</span>
    </button>


    <script src="../js/frame/jquery-3.2.0.js "></script>
    <script src="../js/frame/bootstrap.js "></script>
    <script>
      $(function () {
        $('[data-toggle="popover"]').popover()
      })
    </script>
  </body>

</html>